<style lang="less">
.cate {
  padding-top: 15px;

  .cate-title {
    color: #303133;
    margin-bottom: 20px;

    span {
      color: #909399;
      font-weight: normal;
    }
  }

  .cate-header {
    margin-top: 15px;
    margin-bottom: 20px;

    .el-input {
      width: 260px;
    }

    .el-button {
      margin-left: 15px;
    }
  }

  .cate-main {
    margin-top: 15px;
  }
}
</style>
<template>
  <div class="cate">
    <h3 class="cate-title">分类导航 <span>#{{ cate }}</span></h3>
    <div class="cate-header">
      <el-input v-model="text" placeholder="请输入分类名称" clearable></el-input>
      <el-button type="primary" plain @click="addCateFn">添加</el-button>
    </div>
    <div class="cate-main">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column align="center" label="序号" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id" width="100px" align="center"></el-table-column>
        <el-table-column label="分类名称" prop="cate"></el-table-column>
        <el-table-column label="子分类" prop="cate_name"></el-table-column>
        <el-table-column align="right" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui"
import { addCate, listCate, removeCate } from "../../api/index"

export default {
  data() {
    return {
      cate: this.$route.query.cate || "",
      text: "",
      tableData: [],
    }
  },
  methods: {
    // 删除导航分类
    async removeCateFn(id) {
      await removeCate({ id })
        .then(resData => {
          if (resData.code == 200) {
            Message({ type: "success", message: "删除导航成功" })
            this.listCateFn()
          }
        })
    },
    // 添加导航分类
    async addCateFn() {
      let text = this.text
      if (text == "") {
        Message({ type: "error", message: "输入框不能为空~" })
        return false
      }
      await addCate({
        cate: this.cate,
        cate_name: text
      })
        .then(resData => {
          if (resData.code == 200) {
            Message({
              type: "success",
              message: "添加导航成功"
            })
            this.listCateFn()
            this.text = ""
          }
        })
    },
    // 获取导航分类列表
    async listCateFn() {
      if (!this.cate) return
      await listCate()
        .then(resData => {
          if (resData.code == 200) {
            let { result } = resData
            let arr = result.filter(item => {
              return item.cate == this.cate
            })
            // 按 id 升序排序，确保新添加的项排在后面
            arr.sort((a, b) => {
              return (a.id || 0) - (b.id || 0)
            })
            this.tableData = arr
          }
        })
    },
    // 编辑导航分类
    // eslint-disable-next-line no-unused-vars
    handleEdit(index, row) {
      this.$message.info('编辑功能开发中')
    },
    // 删除导航分类
    handleDelete(index, row) {
      this.$confirm('您要删除该导航吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = row.id
        this.removeCateFn(id)
      }).catch(() => { })
    },
    syncCateFromRoute() {
      this.cate = this.$route.query.cate || ""
      this.listCateFn()
      this.$store.commit("addTab", this.$route)
    }
  },
  created() {
    this.syncCateFromRoute()
  },
  watch: {
    $route: {
      immediate: false,
      deep: true,
      handler() {
        this.syncCateFromRoute()
      }
    }
  }
}
</script>
